<html>
<head>
  <meta charset="UTF-8">
  <title>挂号收费</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>挂号收费</legend>
</fieldset>
<div class="demoTable">
  <form class="layui-form" action="" lay-filter="example">
    <div class="layui-form">
      <div class="layui-inline">
        <label class="layui-form-label"> 卡号:</label>
        <div class="layui-input-inline">
          <input class="layui-input" name="card_id" id="card_id" placeholder="卡号" autocomplete="off">
        </div>
      </div>
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">搜索</button>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline layui-col-md4">
          <input class="layui-input" name="name" id="name1" placeholder="姓名" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label"> 性别: </label>
        <div class="layui-input-inline layui-col-md4">
          <input class="layui-input" name="sex" id="sex" placeholder="性别" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label"> 民族：</label>
        <div class="layui-input-inline layui-col-md4">
          <input class="layui-input" name="nationality" id="nationality" placeholder="民族" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label"> 年龄:</label>
        <div class="layui-input-inline layui-col-md4">
          <input class="layui-input" name="birthday" id="birthday" placeholder="年龄" autocomplete="off">
        </div>
      </div>
    </div>
  </form>
</div>
<form class="layui-form" id="user-add"  action="" lay-filter="add">
<div class="demoTables">
  <form class="layui-form" action="">
    <div class="layui-form">
      <div class="layui-input-inline">
        <label class="layui-form-label">选择科室</label>
        <div class="layui-input-inline">
          <select name="department_id" id="department"  lay-filter="department">
            <option value="">请选择患者所在科室</option>
          </select>
        </div>
      </div>
      <div class="layui-input-inline">
        <label class="layui-form-label">挂号类型</label>
        <div class="layui-input-inline">
          <select name="register_type" id="type">
            <option value="">请选择患者挂号类型</option>
          </select>
        </div>
      </div>
      <!--            <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">搜索</button>-->
      <button class="layui-btn" id="searchBtn" data-type="reload">搜索</button>
    </div>
  </form>
</div>
<div class="demoTabless">
  <div class="layui-form">
  <div class="layui-form-item">
  <div class="layui-inline">
    <label class="layui-form-label"> 挂号费:</label>
    <div class="layui-input-inline">
      <input class="layui-input" name="register" id="registerPriice" value="1.0元" readonly="readonly">
    </div>
  </div>
    <div class="layui-inline">
      <label class="layui-form-label"> 诊断费: </label>
      <div class="layui-input-inline layui-col-md4">
        <input class="layui-input" name="price" id="treatmentPrice" readonly="readonly">
      </div>
    </div>
      <div class="layui-inline">
        <label class="layui-form-label">付款方式</label>
        <div class="layui-input-inline  layui-col-md4">
          <select name="pay_type" class="payType" id="payType" lay-filter="demo" lay-verify="required">
            <option value="支付宝">支付宝</option>
            <option value="现金">现金</option>
          </select>
        </div>
      </div>
    <button class="layui-btn" lay-submit lay-filter="formDemo">提交信息</button>
<!--     <button type="button" class="layui-btn layui-btn-normal" id="ADD-component-form-setval">提交信息</button>-->
  </div>
</div>
</div>
  <div class="demoTablesss">
    <div class="layui-form-item"  id="money" style="display: none">
      <div class="layui-inline">
        <label class="layui-form-label"> 实付:</label>
        <div class="layui-input-inline">
          <input class="layui-input" name="payMoney" oninput="moneyInput()"  id="payMoney">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label"> 找零: </label>
        <div class="layui-input-inline layui-col-md4">
          <input class="layui-input" name="Change" id="Change">
        </div>
      </div>
    </div>
    <div id="apay" style="display: none;margin-left: 55%">
      <img style="width: 100px;height: 100px;"
           src="/static/images/icon/apay.jpg">
    </div>
  </div>
</form>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!-- 自定义的控件 -->
<div id="toolbar" style="display: none; ">
  <div class="layui-btn-group">
    <button class="layui-btn layui-btn-sm" lay-event="add" data-method="notice" data-type="auto">新办就诊卡</button>
  </div>
</div>
<script type="text/jsp" id="barDemo">
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="check">选择</a>
</script>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
  layui.use(['form', 'laydate'], function () {
    // layui引入需要的组件
    var $ = layui.jquery;
    /**支付方式**/
    var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
    var payType = '';
    form.on('select(demo)', function(data){
      payType = $(".payType option:selected").val();
      if (payType === "现金") {
        $("#money").css("display", "block");
        $("#apay").css("display", "none");
        $("#payMoney").val("");
        $("#Change").val("")
      } else if (payType === "支付宝") {
        $("#money").css("display", "none");
        $("#apay").css("display", "block")
      } else {
        $("#money").css("display", "none");
        $("#apay").css("display", "none")
      }
    });
    $(function(){
      //输入框的值改变时触发
      /**计算找零**/
      $("#payMoney").on("input",function(e){
        var a = e.delegateTarget.value;
        var m = $("#payMoney").val();
        var n = $("#treatmentPrice").val();
        var x = m - n - a;
        $("#Change").val(x)
      });
    });
  });
  //科室下拉款二级联动
  layui.use(['form','laydate'], function() {
    // layui引入需要的组件
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    // 二级联动 第一步 渲染父级
    $.ajax({
      url: '/department/findAll',	// 后台取到所有的科室名称
      dataType: 'json',
      type: 'post',
      success: function (resData) {
        $.each(resData.date, function (index, value) {
          // 这里的 value.roomName
          // 前者是页面显示的值，后者是传递给后台的值。
          // 正常情况下，后者应该是 value.id
          $('#department').append(new Option(value.name, value.type));	// 下拉菜单里添加元素
        });
        //渲染select
        form.render('select');
      }
    });
    // 第二步 监听父级，每当父级发生变化时，渲染子级的值
    form.on('select(department)', function (data) {
      var type = data.value; // name 选中的科室名称
      console.log(type)
      $.ajax({
        url: '/department/findAll',
        dataType: 'json',
        type: 'post',
        data: {type: type},		// 传入科室名称，查找该科室的所有床号
        success: function (resData) {
          // 清空床号
          $('#type').empty();
          $.each(resData.date, function (index, value) {
            // 这里的 value.bedNo
            // 前者是页面显示的值，后者是传递给后台的值。
            // 正常情况下，后者应该是 value.id
            $('#type').append(new Option(value.type == 0 ? "普通门诊" : "急诊", value.type));// 下拉菜单里添加元素
          });

          //渲染select
          form.render('select');
        }
      });
    });
    //表单赋值
    layui.$('#LAY-component-form-setval').on('click', function () {
      var data = form.val('example');
      alert(data.card_id)
      $.ajax({
        url: '/patient/findById',
        type: "post",
        dataType: "json",
        data: {card_id: data.card_id},
        success: function (da) {
          console.log(da)
          if (da.code == 200) {
            form.val('example', {
              "name": da.date.name // "name": "value"
              , "sex": da.date.sex
              , "nationality": da.date.nationality
              , "birthday": new Date().getFullYear() - da.date.birthday.split("-")[0]
            });
          } else {
            alert("信息查询失败！");
          }
        }
      });
    });
    //提交信息
    //监听提交
    form.on('submit(formDemo)', function (data) {
      var data1 = form.val("add");
      $.ajax({
        url: '/register/add',
        type: "post",
        dataType: "json",
        data: data1,
        success: function (da) {
          if (da.code == 200) {
            layer.alert("添加成功！", function () {
              // window.parent.location.reload();//刷新父页面
              // parent.layer.close(layer.index);//关闭弹出层
              layer.msg("添加成功！");
            });
          } else {
            layer.msg("添加失败！");
          }
        }
      });
      return false;
    });
  });
  layui.use(['table','form','laydate'], function() {
    // layui引入需要的组件
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    //第一个实例
    table.render({
        elem: '#demo'
      , height: document.body.clientHeight - 180
      , url: '/user/findAll' //数据接口
      /*   , url: '/h/showhospital' //数据接口*/
      , page: true
      , id: 'testReload'
      , cols: [[ //表头
        {field: 'id', title: '序号', sort: true}
        , {field: 'username', title: '医生名称', sort: true}
        , {field: 'create_datetime', title: '门诊时间', sort: true}
        , {field: 'treatment_price', title: '诊查费', sort: true}
        , {field: 'allow_num', title: '限额数', sort: true}
        , {field: 'now_num', title: '已挂号数', sort: true}
        , {field: 'right', title: '操作', toolbar: '#barDemo'}
      ]]
      , toolbar: '#toolbar',//表格头信息
      parseData: function (rs) {//数据格式解析
        console.log(rs);
        if (rs.code == 200) {
          return {
            "code": rs.code,
            "msg": rs.msg,
            "count": rs.date.total,
            "data": rs.date.list
          }
        }
      },
      response: {	// 设置响应码
        statusCode: 200 //规定成功的状态码，默认：0
      }
    });
    //select监听事件
    form.on('select()',function (data) {
      layui.layer.msg(data.value);
      var department_id = $('department');
      console.log(department_id)
      table().reload('testReload'),{
        page: {
          curr: 1
      }
      , where :{
          "department_id":data.value
        }
      }
    });
    //监听事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'add':
          open("新办就诊卡", "/view/registration/add.html");
          break;
      }
      ;
    });
    //监听行事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      if (obj.event === 'detail') {
        open("详情页面", "/view/contract/detail.html?hid=" + data.hid);
      } else if (obj.event === 'check') {
        layer.confirm('选择挂号:' + data.id, function (index) {
          $.ajax({
            type: "POST",
            url: "/user/delete",
            data: {id: data.id, allow_num: data.allow_num},
            dataType: "json",
            success: function (da) {
              console.log(da)
              if (da.code == 200) {
               var price =  $("#treatmentPrice").val()
                alert(price);
                if(price == null){
                  $("#treatmentPrice").val(da.date.treatment_price);
                }else {
                  $("#treatmentPrice").val(price + da.date.treatment_price);
                }
                $(".layui-laypage-btn")[0].click();
                layer.msg(da.msg)
              } else {
                layer.msg(da.msg)
              }
            },
            error: function (da) {
              alert("出现错误");
              return false;
            }
          }) //ajax结束
          layer.close(index);
        });
      } else if (obj.event === 'edit') {
        open("文件修改页面", "/view/hospital/edit.html?hid=" + data.hid);
      }
    });

    //"用户添加页面",
    function open(title, url) {
      layer.open({
        type: 2
        , title: title
        , content: url
        , offset: '50px'
        , area: ['500px', '60%']
        , end: function () {
          table.reload('testReload');

        }
      });
    }
  });
</script>
</body>
</html>